<script setup>
import {ref, reactive, computed, onMounted, watch} from 'vue'
import {
  getWorkListService,
  handleWorkItemService,
  userGetInfoService,
  changePasswordService,
  logoutService,
  logcallback // 确保这个API函数是用于插入日志的
} from '@/api/user.js'
import sider from './ReviewSider.vue'
import heade from './ReviewHeader.vue'
import timeselect from './ReviewTimeSelect.vue'
// 当前选中的菜单项
const activeMenu = ref('worklist')
// 个人中心显示状态
const showProfile = ref(false)
// 审批详情弹窗显示状态
const showApprovalModal = ref(false)
// 修改审批状态弹窗显示状态
const showModifyModal = ref(false)
// 当前审批的项目
const currentApprovalItem = ref(null)
// 当前修改的项目
const currentModifyItem = ref(null)
// 评语输入
const approvalComment = ref('')
// 修改的评语
const modifyComment = ref('')
// 修改的审批状态
const modifyStatus = ref('')
// 加载状态
const loading = ref(false)
const error = ref(null)
// 工作列表数据
const workList = ref([])
const userInfo = ref({})
// 筛选状态
const filterStatus = ref('all')
const input = ref('')
// 批量管理状态
const isBatchMode = ref(false)
const selectedItemIds = ref([])
// 批量审批弹窗
const showBatchApprovalModal = ref(false)
const batchApprovalAction = ref('') // 'approve' 或 'reject'
const batchApprovalComment = ref('')
// 筛选后的工作列表 - 使用computed进行客户端筛选
const filteredWorkList = computed(() => {
  let filtered = workList.value
  // 按状态筛选
  if (filterStatus.value !== 'all') {
    filtered = filtered.filter(item => item.status === filterStatus.value)
  }
  // 按输入内容筛选
  if (input.value.trim()) {
    const searchTerm = input.value.toLowerCase()
    filtered = filtered.filter(item =>
      item.applicant.toLowerCase().includes(searchTerm) ||
      item.title.toLowerCase().includes(searchTerm)
    )
  }
  return filtered
})
// 获取工作列表数据
const fetchWorkList = async () => {
  try {
    loading.value = true
    error.value = null
    const response = await getWorkListService({
      status: filterStatus.value,
      search: input.value
    })
    if (response.data.code === 1) {
      workList.value = response.data.data
    } else {
      error.value = response.data.msg || '获取工作列表失败'
    }
  } catch (err) {
    error.value = '获取工作列表失败'
    console.error('Failed to fetch work list:', err)
  } finally {
    loading.value = false
  }
}
// --- 新增的日志记录函数 ---
/**
 * 记录审批操作日志
 * @param {Object} item - 工作项对象
 * @param {string} action - 操作类型 ('approve' 或 'reject')
 * @param {string} comment - 审批评语
 * @param {boolean} isModification - 是否为修改操作 (true为修改, false为首次审批)
 */
const addOperationLog = async (item, action, comment, isModification = false) => {
  try {
    const logData = {
      applyid: item.id,
      action: action, // 操作类型
      remark: comment || '', // 评语，确保不为空
      ischange: isModification ? 1 : 0, // 1代表修改，0代表新操作
      dep: item.dep || item.department || '', // 员工部门
      staff: item.applicant || item.staff || '', // 员工姓名
      staffno: item.staffno || item.employeeId || '', // 员工号
      dir: item.title || '' // 目标/标题
    };
    await logcallback(logData);
    console.log(`操作日志已记录: ID=${item.id}, Action=${action}, IsChange=${isModification}, Staff=${logData.staff}, Dep=${logData.dep}`);
  } catch (error) {
    // 日志记录失败不应影响主流程，仅在控制台打印错误
    console.error('记录操作日志失败:', error);
  }
};
// 打开审批详情弹窗
const openApprovalModal = (item) => {
  currentApprovalItem.value = item
  approvalComment.value = ''
  showApprovalModal.value = true
}
// 关闭审批详情弹窗
const closeApprovalModal = () => {
  showApprovalModal.value = false
  currentApprovalItem.value = null
  approvalComment.value = ''
}
// 打开修改审批状态弹窗
const openModifyModal = (item) => {
  currentModifyItem.value = item
  modifyStatus.value = item.status === 'approved' ? 'approved' : 'rejected'
  modifyComment.value = item.comment || ''
  showModifyModal.value = true
}
// 关闭修改审批状态弹窗
const closeModifyModal = () => {
  showModifyModal.value = false
  currentModifyItem.value = null
  modifyComment.value = ''
  modifyStatus.value = ''
}
// 修改审批状态
const modifyApproval = async () => {
  if (!currentModifyItem.value) return;

  try {
    loading.value = true;
    error.value = null;
    const action = modifyStatus.value === 'approved' ? 'approve' : 'reject';
    const id = currentModifyItem.value.id;
    const comment = modifyComment.value;
    const extraData = {
      dep: currentModifyItem.value.dep || currentModifyItem.value.department || '',
      staff: currentModifyItem.value.applicant || currentModifyItem.value.staff || '',
      staffno: currentModifyItem.value.staffno || currentModifyItem.value.employeeId || '',
      dir: currentModifyItem.value.title || ''
    };

    const response = await handleWorkItemService(id, action, comment, extraData);

    if (response.data.code === 1) {
      console.log('[诊断] API 调用成功，后端返回的数据是:', response.data.data);

      const updatedItem = response.data.data; // 假设后端返回更新后的完整对象
      if (updatedItem) {
        const index = workList.value.findIndex(w => w.id === id);

        console.log('[诊断] 在 workList 中找到的索引是:', index); // 关键日志！

        if (index !== -1) {
          console.log('[诊断] 准备更新前，workList[index] 是:', workList.value[index]);
          // 使用 Vue 3 推荐的明确方式来触发响应式更新
          workList.value.splice(index, 1, { ...workList.value[index], ...updatedItem });
          console.log('[诊断] 更新后，workList[index] 是:', workList.value[index]);
        } else {
          console.warn('[诊断] 警告：未能在 workList 中找到 id 为', id, '的项！');
        }
      }

      console.log(`审批提交成功: ID=${id}, Action=${action}`);
      // === 集成日志记录：修改审批日志 ===
      await addOperationLog(currentModifyItem.value, action, comment, true);
      closeModifyModal();
    } else {
      error.value = response.data.msg || '提交审批失败';
    }
  } catch (err) {
    // ... catch 部分保持不变
  } finally {
    loading.value = false;
  }
};
// 处理工作项（通过/驳回）
const handleWorkItem = async (action, item) => {
  try {
    loading.value = true
    error.value = null
    console.log(`开始处理工作项: ${action}, ID: ${item.id}, 评语: ${approvalComment.value}`)
    const extraData = {
      dep: item.dep || item.department || '',
      staff: item.applicant || item.staff || '',
      staffno: item.staffno || item.employeeId || '',
      dir: item.title || ''
    }
    const response = await handleWorkItemService(item.id, action, approvalComment.value, extraData)
    console.log('API响应:', response)
    if (response.data.code === 1) {
      const index = workList.value.findIndex(w => w.id === item.id)
      if (index !== -1) {
        const backendStatus = response.data.data?.status
        if (backendStatus === 3) {
          workList.value[index].status = 'approved'
        } else if (backendStatus === 1) {
          workList.value[index].status = 'rejected'
        } else {
          workList.value[index].status = action === 'approve' ? 'approved' : 'rejected'
        }
        console.log(`工作项 ${item.id} 状态已更新为: ${workList.value[index].status}`)
        console.log('后端返回数据:', response.data.data)
      }
      // === 集成日志记录：首次审批/驳回日志 ===
      await addOperationLog(item, action, approvalComment.value, false);
      if (showApprovalModal.value) {
        closeApprovalModal()
      }
    } else {
      error.value = response.data.msg || `${action === 'approve' ? '通过' : '驳回'}失败`
      console.log('业务错误:', response.data)
    }
  } catch (err) {
    error.value = `${action === 'approve' ? '通过' : '驳回'}失败`
    console.error(`API调用失败 - ${action}:`, err)
    console.error('错误详情:', {
      message: err.message,
      response: err.response,
      status: err.response?.status,
      data: err.response?.data,
      config: err.config
    })
    if (err.response?.status === 404) {
      console.error('接口不存在，请检查后端路径是否正确')
    } else if (err.response?.status === 401) {
      console.error('认证失败，请检查token是否有效')
    } else if (err.response?.status === 400) {
      console.error('请求参数错误:', err.response.data)
    } else if (err.code === 'ECONNREFUSED') {
      console.error('后端服务未启动，请检查 http://localhost:8082 是否运行')
    }
  } finally {
    loading.value = false
  }
}
// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await userGetInfoService()
    if (response.data.code === 1) {
      userInfo.value = response.data.data
    }
  } catch (err) {
    console.error('Failed to fetch user info:', err)
  }
}
// 个人中心功能
const toggleProfile = () => {
  showProfile.value = !showProfile.value
}
const changePassword = async () => {
  try {
    const response = await changePasswordService()
    if (response.data.code === 1) {
      alert(response.data.msg || '修改密码成功')
    } else {
      alert(response.data.msg || '修改密码失败')
    }
  } catch (err) {
    alert('修改密码失败')
    console.error('Failed to change password:', err)
  }
}
const logout = async () => {
  try {
    const response = await logoutService()
    if (response.data.code === 1) {
      // 跳转到登录页
      window.location.href = '/login'
    }
  } catch (err) {
    console.error('Failed to logout:', err)
    // 即使失败也跳转到登录页
    window.location.href = '/login'
  }
}
// 切换批量管理模式
const toggleBatchMode = () => {
  isBatchMode.value = !isBatchMode.value
  selectedItemIds.value = []
}
// 全选/取消全选
const handleSelectAll = () => {
  if (selectedItemIds.value.length === filteredWorkList.value.length) {
    selectedItemIds.value = []
  } else {
    selectedItemIds.value = filteredWorkList.value.map(item => item.id)
  }
}
// 切换单个项目选中状态
const toggleItemSelection = (itemId) => {
  const index = selectedItemIds.value.indexOf(itemId)
  if (index > -1) {
    selectedItemIds.value.splice(index, 1)
  } else {
    selectedItemIds.value.push(itemId)
  }
}
// 打开批量审批弹窗
const openBatchApprovalModal = (action) => {
  if (selectedItemIds.value.length === 0) {
    alert('请至少选择一个项目')
    return
  }
  batchApprovalAction.value = action
  batchApprovalComment.value = ''
  showBatchApprovalModal.value = true
}
// 关闭批量审批弹窗
const closeBatchApprovalModal = () => {
  showBatchApprovalModal.value = false
  batchApprovalAction.value = ''
  batchApprovalComment.value = ''
}
// 执行批量审批
const executeBatchApproval = async () => {
  if (selectedItemIds.value.length === 0) return
  
  try {
    loading.value = true
    error.value = null
    
    // 逐个处理选中的项目
    for (const itemId of selectedItemIds.value) {
      const item = workList.value.find(w => w.id === itemId)
      if (!item) continue
      
      const extraData = {
        dep: item.dep || item.department || '',
        staff: item.applicant || item.staff || '',
        staffno: item.staffno || item.employeeId || '',
        dir: item.title || ''
      }
      const response = await handleWorkItemService(itemId, batchApprovalAction.value, batchApprovalComment.value, extraData)
      if (response.data.code === 1) {
        // 更新本地状态
        const index = workList.value.findIndex(w => w.id === itemId)
        if (index !== -1) {
          const backendStatus = response.data.data?.status
          if (backendStatus === 3) {
            workList.value[index].status = 'approved'
          } else if (backendStatus === 1) {
            workList.value[index].status = 'rejected'
          } else {
            workList.value[index].status = batchApprovalAction.value === 'approve' ? 'approved' : 'rejected'
          }
        }
        // 记录日志
        await addOperationLog(item, batchApprovalAction.value, batchApprovalComment.value, false)
      }
    }
    
    // 关闭弹窗并重置状态
    closeBatchApprovalModal()
    selectedItemIds.value = []
    isBatchMode.value = false
    
    alert(`批量${batchApprovalAction.value === 'approve' ? '通过' : '驳回'}成功！`)
  } catch (err) {
    error.value = `批量${batchApprovalAction.value === 'approve' ? '通过' : '驳回'}失败`
    console.error('批量审批失败:', err)
  } finally {
    loading.value = false
  }
}
// 监听筛选条件变化
watch([filterStatus, input], () => {
  // 目前使用computed进行客户端筛选，性能更好
  // fetchWorkList()
})
// 组件挂载时获取数据
onMounted(async () => {
  await Promise.all([
    fetchWorkList(),
    fetchUserInfo()
  ])
})
</script>

<template>
  <div class="admin-layout">
    <!-- 错误提示 -->
    <div v-if="error" class="error-banner">
      {{ error }}
      <button @click="error = null">×</button>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-overlay">
      <div class="spinner"></div>
    </div>

    <!-- 顶栏 -->
    <div class="topbar">
      <heade/>
    </div>

    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-menu">
        <sider/>
      </div>
    </div>

    <!-- 主内容区容器 -->
    <div class="content-wrapper">
      <!-- 主内容区 -->
      <main class="main-content">
        <!-- 工作列表 -->
        <div class="content-section">
          <div class="section-header">
            <h3>工作列表</h3>
            <div class="header-actions">
              <div class="filter-buttons">
                <!-- 批量管理按钮 -->
                <button class="filter-btn" :class="{ active: isBatchMode }" @click="toggleBatchMode">
                  {{ isBatchMode ? '退出批量' : '批量管理' }}
                </button>
                <!-- 批量操作按钮 -->
                <template v-if="isBatchMode && selectedItemIds.length > 0">
                  <button class="filter-btn batch-btn approve-btn" @click="openBatchApprovalModal('approve')">
                    批量通过 ({{ selectedItemIds.length }})
                  </button>
                  <button class="filter-btn batch-btn reject-btn" @click="openBatchApprovalModal('reject')">
                    批量驳回 ({{ selectedItemIds.length }})
                  </button>
                </template>
                <!-- 全选框 -->
                <label v-if="isBatchMode" class="select-all-label">
                  <input
                    type="checkbox"
                    :checked="selectedItemIds.length === filteredWorkList.length && filteredWorkList.length > 0"
                    @change="handleSelectAll"
                  >
                  全选
                </label>
                <button
                  v-for="status in ['all', 'pending', 'approved', 'rejected']"
                  :key="status"
                  class="filter-btn"
                  :class="{ active: filterStatus === status }"
                  @click="filterStatus = status"
                >
                  {{
                    status === 'all' ? '全部' :
                      status === 'pending' ? '待处理' :
                        status === 'approved' ? '已通过' : '已驳回'
                  }}
                </button>
                <!--输入筛选词-->
                <el-input v-model="input" style="width: 240px" placeholder="请输入员工姓名/工号"/>
              </div>
            </div>
          </div><timeselect/>
          <div class="work-list">
            <div v-for="item in filteredWorkList" :key="item.id" class="work-item" :class="{ selected: selectedItemIds.includes(item.id) }">
              <!-- 批量选择框 -->
              <div v-if="isBatchMode" class="batch-checkbox" @click.stop>
                <input
                  type="checkbox"
                  :checked="selectedItemIds.includes(item.id)"
                  @change="toggleItemSelection(item.id)"
                >
              </div>
              <div class="work-item-content">
                <div class="work-item-header">
                  <h4>{{ item.title }}</h4>
                  <span :class="['status-badge', item.status]">
                    {{
                      item.status === 'pending' ? '待处理' :
                        item.status === 'approved' ? '已通过' : '已驳回'
                    }}
                  </span>
                </div>
              <div class="work-item-info">
                <p>申请人：{{ item.applicant }}</p>
                <p>金额：¥{{ item.amount }}</p>
                <p>申请日期：{{ item.date }}</p>
                <p>优先级：
                  <span :class="['priority', item.priority]">
                    {{
                      item.priority === 'high' ? '高' :
                        item.priority === 'medium' ? '中' : '低'
                    }}
                  </span>
                </p>
              </div>
              <div v-if="!isBatchMode && item.status === 'pending'" class="work-item-actions">
                <button class="btn-approval" @click="openApprovalModal(item)"
                        :disabled="loading">审批
                </button>
              </div>
              <div v-else-if="!isBatchMode && (item.status === 'approved' || item.status === 'rejected')" class="work-item-actions">
                <button class="btn-modify" @click="openModifyModal(item)"
                        :disabled="loading">修改
                </button>
              </div>
              </div>
            </div>
            <!-- 空状态 -->
            <div v-if="filteredWorkList.length === 0" class="empty-state">
              暂无数据
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 个人中心模态框 -->
    <div v-if="showProfile" class="profile-modal" @click.self="toggleProfile">
      <div class="profile-content">
        <div class="profile-header">
          <h3>个人中心</h3>
          <button class="close-btn" @click="toggleProfile">&times;</button>
        </div>
        <div class="profile-body">
          <div class="profile-avatar-large">
            <span class="avatar-text">审</span>
          </div>
          <div class="profile-info">
            <h4>{{ userInfo.name || '审批经理' }}</h4>
            <p>部门：{{ userInfo.department || '审核部' }}</p>
            <p>邮箱：{{ userInfo.email || 'manager@example.com' }}</p>
          </div>
          <div class="profile-actions">
            <button class="profile-btn" @click="changePassword">修改密码</button>
            <button class="profile-btn logout" @click="logout">退出登录</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 审批详情弹窗 -->
    <div v-if="showApprovalModal" class="approval-modal" @click.self="closeApprovalModal">
      <div class="approval-content">
        <div class="approval-header">
          <h3>差旅审批详情</h3>
          <button class="close-btn" @click="closeApprovalModal">&times;</button>
        </div>

        <div class="approval-body">
          <!-- 申请信息 -->
          <div class="approval-section">
            <h4>申请信息</h4>
            <div class="approval-info">
              <div class="info-row">
                <span class="info-label">申请人：</span>
                <span class="info-value">{{ currentApprovalItem?.applicant }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">标题：</span>
                <span class="info-value">{{ currentApprovalItem?.title }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">金额：</span>
                <span class="info-value">¥{{ currentApprovalItem?.amount }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">申请日期：</span>
                <span class="info-value">{{ currentApprovalItem?.date }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">优先级：</span>
                <span :class="['priority', currentApprovalItem?.priority]">
                  {{
                    currentApprovalItem?.priority === 'high' ? '高' :
                      currentApprovalItem?.priority === 'medium' ? '中' : '低'
                  }}
                </span>
              </div>
            </div>
          </div>

          <!-- 评语 -->
          <div class="approval-section">
            <h4>评语</h4>
            <textarea
              v-model="approvalComment"
              class="comment-textarea"
              placeholder="请输入审批评语..."
              rows="4"
            ></textarea>
          </div>

          <!-- 操作按钮 -->
          <div class="approval-actions">
            <button class="btn-approve" @click="handleWorkItem('approve', currentApprovalItem)"
                    :disabled="loading">
              通过
            </button>
            <button class="btn-reject" @click="handleWorkItem('reject', currentApprovalItem)"
                    :disabled="loading">
              驳回
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改审批状态弹窗 -->
    <div v-if="showModifyModal" class="modify-modal" @click.self="closeModifyModal">
      <div class="modify-content">
        <div class="modify-header">
          <h3>修改审批状态</h3>
          <button class="close-btn" @click="closeModifyModal">&times;</button>
        </div>

        <div class="modify-body">
          <!-- 申请信息 -->
          <div class="modify-section">
            <h4>申请信息</h4>
            <div class="modify-info">
              <div class="info-row">
                <span class="info-label">申请人：</span>
                <span class="info-value">{{ currentModifyItem?.applicant }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">标题：</span>
                <span class="info-value">{{ currentModifyItem?.title }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">金额：</span>
                <span class="info-value">¥{{ currentModifyItem?.amount }}</span>
              </div>
              <div class="info-row">
                <span class="info-label">当前状态：</span>
                <span :class="['status-badge', currentModifyItem?.status]">
                  {{
                    currentModifyItem?.status === 'approved' ? '已通过' : '已驳回'
                  }}
                </span>
              </div>
            </div>
          </div>

          <!-- 修改审批状态 -->
          <div class="modify-section">
            <h4>修改审批状态</h4>
            <div class="status-options">
              <label class="radio-option">
                <input
                  type="radio"
                  v-model="modifyStatus"
                  value="approved"
                />
                <span class="radio-label">通过</span>
              </label>
              <label class="radio-option">
                <input
                  type="radio"
                  v-model="modifyStatus"
                  value="rejected"
                />
                <span class="radio-label">驳回</span>
              </label>
            </div>
          </div>

          <!-- 修改评语 -->
          <div class="modify-section">
            <h4>修改评语</h4>
            <textarea
              v-model="modifyComment"
              class="comment-textarea"
              placeholder="请输入审批评语..."
              rows="4"
            ></textarea>
          </div>

          <!-- 操作按钮 -->
          <div class="modify-actions">
            <button class="btn-cancel" @click="closeModifyModal"
                    :disabled="loading">
              取消
            </button>
            <button class="btn-save" @click="modifyApproval"
                    :disabled="loading">
              保存修改
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 批量审批弹窗 -->
    <div v-if="showBatchApprovalModal" class="batch-approval-modal" @click.self="closeBatchApprovalModal">
      <div class="batch-approval-content">
        <div class="batch-approval-header">
          <h3>批量{{ batchApprovalAction === 'approve' ? '通过' : '驳回' }}</h3>
          <button class="close-btn" @click="closeBatchApprovalModal">&times;</button>
        </div>

        <div class="batch-approval-body">
          <!-- 选中项目信息 -->
          <div class="batch-approval-section">
            <h4>已选中 {{ selectedItemIds.length }} 个项目</h4>
            <div class="selected-items-info">
              <p>即将对选中的项目执行批量{{ batchApprovalAction === 'approve' ? '通过' : '驳回' }}操作</p>
            </div>
          </div>

          <!-- 评语 -->
          <div class="batch-approval-section">
            <h4>审批评语</h4>
            <textarea
              v-model="batchApprovalComment"
              class="comment-textarea"
              placeholder="请输入审批评语（可选）..."
              rows="4"
            ></textarea>
          </div>

          <!-- 操作按钮 -->
          <div class="batch-approval-actions">
            <button class="btn-cancel" @click="closeBatchApprovalModal"
                    :disabled="loading">
              取消
            </button>
            <button 
              class="btn-confirm" 
              :class="{ 'btn-approve': batchApprovalAction === 'approve', 'btn-reject': batchApprovalAction === 'reject' }"
              @click="executeBatchApproval"
              :disabled="loading">
              确认{{ batchApprovalAction === 'approve' ? '通过' : '驳回' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* --- 总体布局 --- */
.admin-layout {
  display: flex;
  height: 100vh;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
}

/* --- 错误提示 --- */
.error-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #ff4d4f;
  color: white;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1001;
  animation: slideDown 0.3s ease-out;
}

.error-banner button {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 0 0 0 20px;
}

/* --- 加载状态 --- */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* --- 空状态 --- */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 16px;
}

/* --- 动画 --- */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.content-wrapper {
  margin-top: 50px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* --- 侧边栏样式 --- */
.sidebar {
  width: 260px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.sidebar-header h2 {
  margin: 0 0 5px 0;
  font-size: 20px;
  font-weight: 600;
}

.sidebar-header p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

.sidebar-menu {
  flex: 1;
  padding: 20px 0;
}

/* --- 顶栏样式 --- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 0 30px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.avatar-text {
  color: white;
  font-weight: 600;
  font-size: 16px;
}

/* --- 主内容区样式 --- */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.content-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 30px;
  border-bottom: 1px solid #e8e8e8;
}

.section-header h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #333;
}

/* --- 工作列表样式 --- */
.header-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}

.filter-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 8px 16px;
  border: 1px solid #d9d9d9;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.filter-btn:hover {
  border-color: #667eea;
  color: #667eea;
}

.filter-btn.active {
  background: #667eea;
  border-color: #667eea;
  color: white;
}

.filter-btn.batch-btn {
  margin-left: 10px;
}

.filter-btn.approve-btn:hover {
  border-color: #52c41a;
  color: #52c41a;
}

.filter-btn.reject-btn:hover {
  border-color: #ff4d4f;
  color: #ff4d4f;
}

.select-all-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  margin-left: 10px;
}

.select-all-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.work-list {
  padding: 20px 30px;
  overflow-y: auto;
}

.work-item {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 15px;
  transition: all 0.3s ease;
  border: 1px solid #e8e8e8;
  display: flex;
  align-items: flex-start;
  gap: 15px;
}

.work-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.work-item.selected {
  background: #f0f9ff;
  border-color: #1890ff;
}

.batch-checkbox {
  flex-shrink: 0;
  padding-top: 5px;
}

.batch-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.work-item-content {
  flex: 1;
  min-width: 0;
}

.work-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.work-item-header h4 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.status-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.pending {
  background: #fff3cd;
  color: #856404;
}

.status-badge.approved {
  background: #d4edda;
  color: #155724;
}

.status-badge.rejected {
  background: #f8d7da;
  color: #721c24;
}

.work-item-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 15px;
}

.work-item-info p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.priority {
  font-weight: 500;
}

.priority.high {
  color: #e74c3c;
}

.priority.medium {
  color: #f39c12;
}

.priority.low {
  color: #27ae60;
}

.work-item-actions {
  display: flex;
  gap: 10px;
}

.btn-approval, .btn-approve, .btn-reject {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-approve {
  background: #28a745;
  color: white;
}

.btn-approve:hover:not(:disabled) {
  background: #218838;
}

.btn-approve:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-reject {
  background: #dc3545;
  color: white;
}

.btn-reject:hover:not(:disabled) {
  background: #c82333;
}

.btn-reject:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-approval {
  background: #667eea;
  color: white;
}

.btn-approval:hover:not(:disabled) {
  background: #5567d8;
}

.btn-approval:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-modify {
  background: #f39c12;
  color: white;
}

.btn-modify:hover:not(:disabled) {
  background: #e67e22;
}

.btn-modify:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- 个人中心模态框样式 --- */
.profile-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.profile-content {
  background: #fff;
  padding: 0;
  border-radius: 12px;
  width: 400px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e8e8e8;
}

.profile-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 30px;
  height: 30px;
}

.close-btn:hover {
  color: #333;
}

.profile-body {
  padding: 30px;
  text-align: center;
}

.profile-avatar-large {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.profile-avatar-large .avatar-text {
  color: white;
  font-weight: 600;
  font-size: 36px;
}

.profile-info h4 {
  margin: 0 0 10px 0;
  font-size: 20px;
  color: #333;
}

.profile-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.profile-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-btn {
  padding: 12px 20px;
  border: 1px solid #d9d9d9;
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.3s ease;
}

.profile-btn:hover {
  background-color: #f5f5f5;
  border-color: #667eea;
  color: #667eea;
}

.profile-btn.logout {
  color: #e74c3c;
  border-color: #f8d7da;
}

.profile-btn.logout:hover {
  background-color: #f8d7da;
  border-color: #e74c3c;
}

/* --- 审批详情弹窗样式 --- */
.approval-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.approval-content {
  background: #fff;
  border-radius: 12px;
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.3s ease-out;
}

.approval-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e8e8e8;
}

.approval-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.approval-body {
  padding: 30px;
}

.approval-section {
  margin-bottom: 25px;
}

.approval-section:last-child {
  margin-bottom: 0;
}

.approval-section h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.approval-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-label {
  font-weight: 500;
  color: #666;
  width: 100px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  flex: 1;
}

.comment-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 100px;
}

.comment-textarea:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.approval-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* --- 修改审批状态弹窗样式 --- */
.modify-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1002;
}

.modify-content {
  background: #fff;
  border-radius: 12px;
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.3s ease-out;
}

.modify-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e8e8e8;
}

.modify-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.modify-body {
  padding: 30px;
}

.modify-section {
  margin-bottom: 25px;
}

.modify-section:last-child {
  margin-bottom: 0;
}

.modify-section h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.modify-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.status-options {
  display: flex;
  gap: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

.radio-option {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
}

.radio-option input[type="radio"] {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  accent-color: #667eea;
}

.radio-label {
  color: #333;
  font-weight: 500;
}

.btn-cancel, .btn-save {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-cancel {
  background: #f5f5f5;
  color: #666;
  border: 1px solid #d9d9d9;
}

.btn-cancel:hover:not(:disabled) {
  background: #e8e8e8;
  border-color: #bbb;
}

.btn-save {
  background: #667eea;
  color: white;
}

.btn-save:hover:not(:disabled) {
  background: #5567d8;
}

.btn-cancel:disabled,
.btn-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modify-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

/* --- 批量审批弹窗样式 --- */
.batch-approval-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1003;
}

.batch-approval-content {
  background: #fff;
  border-radius: 12px;
  width: 600px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  animation: modalFadeIn 0.3s ease-out;
}

.batch-approval-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #e8e8e8;
}

.batch-approval-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.batch-approval-body {
  padding: 30px;
}

.batch-approval-section {
  margin-bottom: 25px;
}

.batch-approval-section:last-child {
  margin-bottom: 0;
}

.batch-approval-section h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
  font-weight: 600;
}

.selected-items-info {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 15px 20px;
}

.selected-items-info p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.batch-approval-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.btn-confirm {
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  color: white;
}

.btn-confirm.btn-approve {
  background: #52c41a;
}

.btn-confirm.btn-approve:hover:not(:disabled) {
  background: #73d13d;
}

.btn-confirm.btn-reject {
  background: #ff4d4f;
}

.btn-confirm.btn-reject:hover:not(:disabled) {
  background: #ff7875;
}

.btn-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
